:root {
  --toolbar-position-offset: 1em;
}

.toolbar {
  display: flex;
  z-index: var(--z-index-toolbar);
}

.is-toolbar-location-corner .toolbar {
  position: fixed;
}

.is-toolbar-location-corner.is-toolbar-position-top-left .toolbar {
  top: var(--toolbar-position-offset);
  left: var(--toolbar-position-offset);
}

.is-toolbar-location-corner.is-toolbar-position-top-right .toolbar {
  top: var(--toolbar-position-offset);
  right: var(--toolbar-position-offset);
}

.is-toolbar-location-corner.is-toolbar-position-bottom-left .toolbar {
  bottom: var(--toolbar-position-offset);
  left: var(--toolbar-position-offset);
}

.is-toolbar-location-corner.is-toolbar-position-bottom-right .toolbar {
  bottom: var(--toolbar-position-offset);
  right: var(--toolbar-position-offset);
}

.toolbar-control {
  font-size: calc(var(--toolbar-size) * 0.01em);
  display: flex;
  transition: opacity var(--layout-transition-extra-fast);
}

.is-toolbar-location-header.is-header-item-justify-left .toolbar {
  justify-content: flex-start;
}

.is-toolbar-location-header.is-header-item-justify-center .toolbar {
  justify-content: center;
}

.is-toolbar-location-header.is-header-item-justify-right .toolbar {
  justify-content: flex-end;
}

.is-toolbar-opacity-low .toolbar {
  --button-text: var(--theme-primary-text-010);
  --button-text-focus-hover: var(--theme-primary-text-010);
  --button-text-active: var(--theme-primary-text-010);
  --button-text-disabled: var(--theme-primary-010);
}

.is-toolbar-opacity-low .toolbar {
  --button-text: var(--theme-primary-text-010);
  --button-text-focus-hover: var(--theme-primary-text-010);
  --button-text-active: var(--theme-primary-text-010);
  --button-text-disabled: var(--theme-primary-010);
}

.is-toolbar-opacity-low.is-theme-background-type-accent .toolbar {
  --button-text: var(--theme-accent-text);
  --button-text-focus-hover: var(--theme-accent-text);
  --button-text-active: var(--theme-accent-text);
  --button-text-disabled: var(--theme-accent-text);
}

.is-toolbar-opacity-low.is-theme-background-type-color .toolbar {
  --button-text: var(--theme-background-color-text);
  --button-text-focus-hover: var(--theme-background-color-text);
  --button-text-active: var(--theme-background-color-text);
  --button-text-disabled: var(--theme-background-color-text);
}


.toolbar-item.button,
.toolbar-item.form-input-button input[type="color"]+label {
  background-color: hsla(var(--button-background), calc(var(--theme-toolbar-opacity) / 100));
}

.toolbar-item.button:focus,
.toolbar-item.button:hover,
.toolbar-item.form-input-button:focus input[type="color"]+label,
.toolbar-item.form-input-button:hover input[type="color"]+label {
  background-color: hsla(var(--button-background-focus-hover), calc(var(--theme-toolbar-opacity) / 100));
}

.toolbar-item.button:active,
.toolbar-item.form-input-button:active input[type="color"]+label {
  background-color: hsla(var(--button-background-focus-hover), calc(var(--theme-toolbar-opacity) / 100));
}

.toolbar-item.button.active,
.toolbar-item.form-input-button.active input[type="color"]+label {
  background-color: hsla(var(--button-background-active), calc(var(--theme-toolbar-opacity) / 100));
}

.toolbar-item.button.disabled,
.toolbar-item.button.disabled:hover,
.toolbar-item.button.disabled:focus,
.toolbar-item.button.disabled:active,
.toolbar-item.form-input-button input[type="color"]:disabled+label,
.toolbar-item.form-input-button input[type="color"]:disabled:hover+label,
.toolbar-item.form-input-button input[type="color"]:disabled:focus+label,
.toolbar-item.form-input-button input[type="color"]:disabled:active+label {
  background-color: hsla(var(--button-background-disabled), calc(var(--theme-toolbar-opacity) / 100));
}
